<template>
    <!-- {[data]} -->

    <el-sub-menu :index="data.path" v-if="hasChildren">
        <template #title>
            <el-icon>
                <location />
            </el-icon>
            <span>{{ data.meta.title }}</span>
        </template>
        <el-menu-item v-for="item in data.children" :key="item.path" :index="item.path">
            <el-icon><icon-menu /></el-icon>
            <template #title>{{ item.meta.title }}</template>
        </el-menu-item>
    </el-sub-menu>
    <el-menu-item :index="data.path" v-else>
        <template #title>
            <el-icon>
                <setting />
            </el-icon>
            <span>{{ data.meta.title }}</span>
        </template>
    </el-menu-item>
    <!-- <el-sub-menu :index="data.path" v-else>
        <template #title> 
            <el-icon>
                <location />
            </el-icon>
            <span>{{ data.meta.title }}</span>
        </template>
    </el-sub-menu> -->



    <!-- <el-menu-item index="3" disabled>
        <el-icon>
            <document />
        </el-icon>
        <template #title>Navigator Three</template>
    </el-menu-item>
    <el-menu-item index="4">
        <el-icon>
            <setting />
        </el-icon>
        <template #title>Navigator Four</template>
    </el-menu-item> -->


</template>

<script setup>
import { Setting } from '@element-plus/icons-vue';
import { computed } from 'vue'
const props = defineProps({
    data: {
        type: Object,
        default: {}
    }
})

const hasChildren = computed(() => {
    return Array.isArray(props.data.children) && props.data.children.length > 0
})



</script>
<style lang='scss' scoped></style>